import React, { useState, useEffect } from 'react';
import { Progress } from 'antd';

// 档案信息
const FileCompleteProgress = ({ label = '档案信息：', entryPersonnelCode, boxStyle = {}, width = '100%', ...rest }) => {
    const [strokeColor, setStrokeColor] = useState();
    const [value, setValue] = useState(0);

    // 通过接口获取完成度
    // TODO，临时写个值
    useEffect(() => {
        setValue(30);
    }, []);

    useEffect(() => {
        let colortemp = '#44C69D';
        if (value <= 30) {
            colortemp = 'rgba(255, 0, 0, 0.85)';
        } else if (value < 80) {
            colortemp = 'FFA22D';
        }
        setStrokeColor(colortemp);
    }, [value]);

    return (
        <>
            <div style={{ display: 'flex', height: '100%', alignItems: 'center', width, ...boxStyle }}>
                {label ? <b>{label}</b> : null}
                <Progress style={{ flex: 1 }} percent={value} strokeColor={strokeColor} {...rest} />
            </div>
        </>
    );
};

export default FileCompleteProgress;
